<template>
	<div class="lx-container">
		<div class="back-row">
			<div class="back-btn" @click="cancle">
				<i class="el-icon-arrow-left" ></i>返回
			</div>
			<div class="news-main">
				<div class="news-title">
					{{newsInfo.newsTitle}}
				</div>
				<div class="news-info">
					<span>发布时间：{{newsInfo.createTime}}</span>
					<span style="margin-left: 48px;">{{newsInfo.pageView}}次浏览</span>
				</div>
				<div class="news-content" v-html="newsInfo.newsContent">
					
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapActions
	} from "vuex"
	import {toTimeStr} from "@/common/utils"
	export default{
		mounted() {
			let _this = this;
			//初始化窗口
			let params =  _this.$store.state.pageParams;//传入到新建题目的查询参数，新建题目不修改直接返回
			if(!params || JSON.stringify(params) == "{}" ){
				_this.$message.error("参数有误");
				setTimeout(()=>{
					_this.cancle();
				},300)
				return;
			}
			_this.queryParams = params.queryParams;
			if(params.newsId || params.newsId == 0){
				_this.comfrom = "list";
				_this.newsInfo.id = params.newsId;
				_this.getNewsDetail();
			}else if(params.newsInfo){
				_this.comfrom = "create";
				let newsInfo = params.newsInfo;
				newsInfo.createTime = toTimeStr(new Date(),true);
				newsInfo.pageView = 1;
				_this.newsInfo = newsInfo;
			}
		},
		data(){
			return {
				comfrom:"",
				newsInfo:{},
				queryParams:null
			}
		},
		methods:{
			async getNewsDetail(){
				let _this = this;
				let ret = await _this.$api.getNewsDetail(_this.newsInfo.id);
				if(ret){
					_this.newsInfo = ret;
				}
			},
			cancle(){
				if(this.comfrom == "list"){
					this.setPageParams({queryParams:this.queryParams});
					this.$router.push({name:"NewsList"});
				}else{
					this.setPageParams({queryParams:this.queryParams,newsInfo:this.newsInfo});
					this.$router.push({name:"CreateNews"});
				}
				
			},
			...mapActions(["setPageParams"])
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.lx-container{
		@include flex-row(flex-start, center);
		
		.back-row{
			width: 100%;
			height: 48px;
			padding-left: 20px;
			box-sizing: border-box;
			border-bottom: solid 1px #EBEEF6;
			
			.back-btn{
				width: 120px;
				height: 48px;
				cursor: pointer;
				@include flex-row(flex-start, center);
				font-size: 16px;
				i{
					font-size: 18px;
				}
			}
		}
		
		.news-main{
			width: 100%;
			padding: 32px;
			box-sizing: border-box;
			@include flex-column(flex-start, flex-start);
			
			.news-title{
				width: 100%;
				line-height: 40px;
				font-size: 24px;
				font-weight: bolder;
				text-align: center;
			}
			
			.news-info{
				width: 100%;
				height: 20px;
				@include flex-row(center, center);
				color: #999999;
				margin-top: 16px;
			}
			
			.news-content{
				width: 100%;
				margin-top: 32px;
				
				img{
					max-width: 98%;
				}
			}
		}
	}
</style>
